<template>
  <div id="BE2Container"></div>
</template>

<script>
import 'cesium/Build/Cesium/Widgets/widgets.css'
import Vue from 'vue'
export default {
  name: 'BE2Viewer',
  mounted() {
    const BE2 = this.BE2
    var viewer = new BE2.Viewer('BE2Container', {
      imageryProvider: new BE2.TileMapServiceImageryProvider({
        url: '',
        templateUrl: 'http://101.231.116.46:8982/api/wmts/v2/wgs84_1,wgs84_2/{z}/{x}/{y}/jpg&token=9ff2a85b695efcfa513b836d8e5b7388',
        minimumLevel: 0,
        maximumLevel: 18,
        tilingScheme: new BE2.GeographicTilingScheme(BE2.Ellipsoid.WGS84)
      }),
      baseLayerPicker: false, // 图层选择器
      animation: false, // 左下角仪表
      fullscreenButton: false, // 全屏按钮
      geocoder: false, // 右上角查询搜索
      infoBox: false, // 信息框
      homeButton: false, // home按钮
      sceneModePicker: true, // 3d 2d选择器
      selectionIndicator: false, //
      timeline: false, // 时间轴
      navigationHelpButton: false // 右上角帮助按钮
    })
    viewer.cesiumWidget.creditContainer.style.display = 'none'

    const { scene } = viewer
    // 地图场景最大缩放层级,即地图最小允许展示的颗粒度
    scene.screenSpaceCameraController.minimumZoomDistance = 50
    // 地图场景最小缩放层级,即地图最大允许展示的颗粒度
    scene.screenSpaceCameraController.maximumZoomDistance = 200000

    // 设置相机视角 --FLY
    scene.camera.flyTo({
      duration: 1, // 飞的过渡动画时间
      destination: BE2.Cartesian3.fromDegrees(
        120.083767, // 地图经度
        30.235533, // 地图维度
        5000 // 地图高度
      ),
      orientation: {
        // heading: BE2.Math.toRadians(1000),
        pitch: BE2.Math.toRadians(-45) // 视角
      }
    })

    // 设置相机视角 --Jump
    viewer.camera.setView({
      destination: BE2.Cartesian3.fromDegrees(111.07, 39.05, 10000),
      orientation: {
        heading: BE2.Math.toRadians(0),
        pitch: BE2.Math.toRadians(-90),
        roll: BE2.Math.toRadians(0)
      }
    })

    // 亮度设置
    const stages = viewer.scene.postProcessStages
    viewer.scene.brightness = viewer.scene.brightness || stages.add(BE2.PostProcessStageLibrary.createBrightnessStage())
    viewer.scene.brightness.enabled = true
    viewer.scene.brightness.uniforms.brightness = Number(1.2) // 1比原图稍暗,数字越小越暗

    Vue.prototype.viewer = viewer
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#BE2Container {
  width: 100%;
  height: 100%;
}
</style>
